<template>
  <div class="point" v-if="show">
    <div class="content" :class="{active: selfShow}">
      <div class="title">
        选择集合点
        <div class="close" @click="close">╳</div>
      </div>
      <div class="items">
        <template v-for="(item, idx) in items">
          <div
            class="item"
            @click="select(item)"
            :key="idx">{{idx + 1}}、{{item.title ? item.title : item.address}}&nbsp;{{item.set_out_date}}</div>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    groupStageId: {
      default: 0
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      selfShow: false,
      items: []
    }
  },
  watch: {
    show (val) {
      if (val) {
        this.getItems()
        this.$nextTick(() => {
          setTimeout(() => {
            this.selfShow = val
          }, 50)
        })
      }
    }
  },
  methods: {
    select (item) {
      this.$emit('submit', item)
      this.close()
    },
    /**
     * 获取数据
     */
    getItems () {
      this
        .$api
        .activity
        .collectionPointsByGroupStageId(this.groupStageId)
        .then(r => {
          this.items = r
        })
    },
    /**
     * @purpose 关闭
     */
    close () {
      this.selfShow = false
      setTimeout(() => {
        this.$emit('update:show', false)
      }, 300)
    }
  }
}
</script>
<style scoped lang="sass">
  .point
    width: 100%
    height: 100%
    background-color: rgba(0,0,0,0.5)
    position: fixed
    top: 0
    left: 0
    z-index: 100
    display: flex
    justify-content: center
    .content
      width: 100%
      max-width: 640px
      height: 80%
      position: absolute
      background-color: #ffffff
      bottom: -80%
      transition: all .3s
      -webkit-backface-visibility: hidden
      -moz-backface-visibility: hidden
      -ms-backface-visibility: hidden
      backface-visibility: hidden
      -webkit-perspective: 1000
      -moz-perspective: 1000
      -ms-perspective: 1000
      perspective: 1000
      &.active
        bottom: 0
      .title
        width: 100%
        height: 45px
        display: flex
        align-items: center
        justify-content: center
        font-size: 1rem
        border-bottom: 1px solid #f4f4f4
        position: relative
        .close
          width: 45px
          height: 45px
          position: absolute
          top: 0
          right: 0
          display: flex
          align-items: center
          justify-content: center
          font-size: .8rem
          &:active
            background-color: #f4f4f4
      .items
        width: 100%
        height: calc(100% - 45px)
        overflow-x: hidden
        overflow-y: auto
        .item
          width: calc(100% - 20px)
          min-height: 45px
          border-bottom: 1px solid #f4f4f4
          padding: 10px
          line-height: 1.2rem
          font-size: 1rem
          display: flex
          align-items: center
          &.active
            color: #ff5700
          &:active
            background-color: #f4f4f4
</style>
